<script setup>
import { ref, reactive, onMounted } from 'vue'
import ECharts from '../../components/ECharts.vue'
import { report as reportApi } from '../../api'
const condition = reactive({dataType: 1, type: 'month'})
const dataType = [
    {
        value: 1,
        label: '仅本人',
    },
    {
        value: 2,
        label: '本人及下属',
    },
    {
        value: 3,
        label: '仅本部门',
    },
    {
        value: 4,
        label: '本部门及下属部门',
    },
    {
        value: 0,
        label: '自定义',
    },
]
const type = [{
    value: 'today',
    label: '今天',
    last: '昨天'
},{
    value: 'yesterday',
    label: '昨天',
    last: '前天'
},{
    value: 'week',
    label: '本周',
    last: '上周',
},{
    value: 'lastWeek',
    label: '上周',
    last: '前周'
},{
    value: 'month',
    label: '本月',
    last: '上月'
},{
    value: 'lastMonth',
    label: '上月',
    last: '前月'
},{
    value: 'quarter',
    label: '本季度',
    last: '上季度'
},{
    value: 'lastQuarter',
    label: '上季度',
    last: '前季度'
},{
    value: 'year',
    label: '本年',
    last: '上年'
},{
    value: 'lastYear',
    label: '去年',
    last: '前年'
},{
    value: 0,
    label: '自定义'
}]
const report = ref({
    business: {label: '新增商机(个)', icon: 'icon-meiyuan8', color: 'rgb(251, 147, 35)'},
    businessMoney: {label: '商机金额(元)', icon: 'icon-sandianyuan', color: 'rgb(173, 92, 255)'},
    contacts: {label: '新增联系人(人)', icon: 'icon-V', color: 'rgb(39, 186, 74)'},
    contract: {label: '新增合同(个)', icon: 'icon-hetong1', color: 'rgb(74, 91, 253)'},
    contractMoney: {label: '合同金额(元)', icon: 'icon-qiandai', color: 'rgb(25, 181, 246)'},
    customer: {label: '新增客户(人)', icon: 'icon-building__fill', color: 'rgb(35, 98, 251)'},
    receivablesMoney: {label: '回款金额(元)', icon: 'icon-qiandai', color: 'rgb(255, 185, 64)'},
    record: {label: '新增跟进记录(条)', icon: 'icon-jilu', color: 'rgb(74, 91, 253)'}
})
const recoveries = ref(null)
const op1 = ref({
  series: [
    {
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 40,
        fontSize: 20
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} km/h',
        color: 'inherit',
        fontSize: 20
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
})
onMounted(async () => {
    const response = await reportApi(condition)
    report.value = Object.keys(response.data).reduce((origin, item) => {
        const key = item.slice(0, -3)
        return {...origin, [key]: {
            ...origin[key],
            current: response.data[item],
            previous: response.prev[item]
        }}
    }, report.value)
    console.log(report.value)
})
</script>
<template>
    <div class="main-view">
    <header>
        <div>
            <el-select v-model="condition.dataType">
                <template #prefix>abc</template>
                <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
                    <div class="option-item-label">{{ item.label }}</div>
                </el-option>
            </el-select>
        </div>
        <div>
            <el-select v-model="condition.type" style="width: 190px;">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                    <div class="option-item-label">{{ item.label }}</div>
                </el-option>
            </el-select>
        </div>
    </header>
    <main>
        <div>
            <section>
                <h3>销售简报</h3>
                <div>
                    <div class="card" v-for="item in ['customer', 'contacts', 'business','contract','contractMoney','businessMoney','receivablesMoney','record']">
                        <div class="card-left">
                            <div :style="{background: report[item].color}">
                                <i :class="['iconfont', report[item].icon]"></i>
                            </div>
                            <div>
                                <h4>{{ report[item].label }}</h4>
                                <h3>{{ report[item].current }}</h3>
                            </div>
                        </div>
                        <div class="card-right" v-if="condition.type">
                            <div>较{{ type.find(it => it.value === condition.type).last }}</div>
                            <div>{{report[item].previous * 100}}%</div>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <h3>排行榜</h3>
                <h5>对回款金额进行的排行统计</h5>
                <div class="table-title">回款金额排行榜</div>
                <el-table :data="recoveries">
                    <el-table-column prop="no" label="排名" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="amount" label="回款金额(元)" />
                    <el-table-column prop="rate" label="目标完成率(%)" />
                    <template #empty>暂无数据</template>
                </el-table>
                <div class="table-after">
                    <div>--</div>
                    <div></div>
                    <div>--</div>
                    <div>--</div>
                </div>
            </section>
            <section>
                <h3>遗忘提醒</h3>
                <h5>对一段时间内未联系的客户进行分类汇总</h5>
                <div>
                    <el-card shadow="hover">
                        <div>超过7天未联系的客户</div>
                        <h3><span>0</span>个</h3>
                    </el-card>
                    <el-card shadow="hover">
                        <div>超过15天未联系的客户</div>
                        <h3><span>0</span>个</h3>
                    </el-card>
                    <el-card shadow="hover">
                        <div>超过30天未联系的客户</div>
                        <h3><span>0</span>个</h3>
                    </el-card>
                    <el-card shadow="hover">
                        <div>超过3个月未联系的客户</div>
                        <h3><span>0</span>个</h3>
                    </el-card>
                    <el-card shadow="hover">
                        <div>超过6个月未联系的客户</div>
                        <h3><span>0</span>个</h3>
                    </el-card>
                    <el-card shadow="hover">
                        <div>逾期未联系的客户</div>
                        <h3><span>0</span>个</h3>
                    </el-card>
                </div>
            </section>
            <section>
                <h3>销售漏斗 (商机组：系统默认)</h3>
                <div style="height: 300px;">
                    <ECharts :option="{}"></ECharts>
                </div>
            </section>
            <section>
                <h3>合同金额目标及完成情况</h3>
                <div>
                    <ECharts :option="op1"/>
                </div>
            </section>
            <section></section>
            <section></section>
        </div>
    </main>
</div>
</template>

<style scoped lang="scss">
.main-view{
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}
header {
    box-sizing: border-box;
    padding: 15px 0;
    display: flex;
    >div{
        &:first-child{
            margin-right: 20px;
        }
    }
}
.option-item-label{
    &::before{
        content: '•';
        margin-right: 10px;
    }
    &:hover{
        background: #f5f7fa;
    }
}
.el-select-dropdown__list{
    padding: 0;
}
main{
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
}
main > div{
    padding: 0 0 20px;
    display: grid;
    grid-template-areas: "one one"
                         "two three"
                         "four five"
                         "six seven";
    grid-template-columns: 2.5fr 2fr;
    gap: 10px;
    height: 100%;
    overflow: auto
}
section {
    background: #fff;
    border-radius: 2px;
    padding: 20px;
    border: 1px solid #e6e6e6;
    &:nth-of-type(1){
        grid-area: one;
        >div{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
    }
    &:nth-of-type(2){
        grid-area: two;
    }
    &:nth-of-type(3){
        grid-area: three;
        >div{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
    }
    &:nth-of-type(4){
        grid-area: four;
    }
    &:nth-of-type(5){
        grid-area: five;
    }
    &:nth-of-type(6){
        grid-area: six;
    }
    &:nth-of-type(7){
        grid-area: seven;
    }
}
.card{
    display: flex;
    border-radius: 4px;
    box-shadow: 0 0 16px 0 rgba(0,0,0,.08);
    padding: 20px 10px;
    &:hover{
        box-shadow: 0 0 16px 0 rgba(0,0,0,.2);
    }
    h3{
        font-size: 24px;
        font-weight: 700;
        margin-top: 8px;
        line-height: 1;
    }
    &-left{
        display: flex;
        align-items: center;
        margin-right: 20px;
        &::after{
            content: '';
            width: 1px;
            height: 85%;
            background-color: #e6e6e6;
            margin-left: 30px
        }
        >div{
            &:first-child{
                background: red;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                line-height: 36px;
                text-align: center;
                color: #fff;
                margin-right: 10px;
            }
        }
    }
    &-right{
        text-align: center;
        font-size: 12px;
        >div:last-child{
            font-size: 14px;
            color: #2bbf24;
            margin-top: 8px;
        }
    }
}
.table-after{
    font-size: 14px;
    color: #333;
    background-color: #f5f5f5;
    display: table;
    table-layout: fixed;
    width: 100%;
    >div{
        display: table-cell;
        color: #2362fb;
        font-weight: 700;
        line-height: 44px;
        &:first-child{
            padding-left: 20px;
        }
    }
}
</style>
<style>
.el-select__placeholder{
    position: relative;
    transform: translateY(0);
}
</style>